<template>
	<view class="register-container">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view class="register-form-container">
			<!-- 产品ip -->
			<view class="app-ip">
				<image class="app-ip-image" src="../../static/images/appIP/pig.png"></image>
				<view class="app-name">猪小妹之家</view>
			</view>
			<!-- 注册表单 -->
			<view class="register-form">
				<!-- 账号 -->
				<view class="form-item">
					<text class="form-label">账号 :</text>
					<view class="form-label-input">
						<input focus maxlength="12" v-model="account" placeholder="请输入账号" @input="accountClear" 
						@blur="contentLength(account)" :spellcheck="false" />
						<uni-icons v-if="clearShow" type="close" @click="clearAccount" ></uni-icons>
					</view>
				</view>
				<!-- 密码 -->
				<view class="form-item">
					<text class="form-label">密码 :</text>
					<view class="form-label-input">
						<input v-model="password" :type="passwordType" placeholder="请输入密码 (最长20字符)" @input="passwordShow"
						 @blur="contentLength(password)" :spellcheck="false" />
						<uni-icons v-if="showEye" type="eye" @click="togglePasswordVisibility" ></uni-icons>
						<uni-icons v-if="showEyeSlash" type="eye-slash" @click="togglePasswordVisibility" ></uni-icons>
					</view>
				</view>
				<!-- 确认密码 -->
				<view class="form-item">
					<text class="form-label">确认密码 :</text>
					<view class="form-label-input">
						<input v-model="passwordAgain" type="password" placeholder="请再次输入密码" @blur="confirmPassword" :spellcheck="false" />
					</view>
				</view>
				<!-- 邀请码 -->
				<view class="form-item">
					<text class="form-label">邀请码 :</text>
					<view class="form-label-input">
						<input v-model="invitationCode" placeholder="请输入邀请码" @blur="contentLength(invitationCode)" :spellcheck="false" />
					</view>
				</view>
				<view class="error-message">{{errorMessage}}</view>
				<!-- 注册 -->
				<button class="register-submit" @click="register"><text >注册</text></button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { encrypt } from '../../utils/crypto.js';
	import { userRegister } from '../../utils/apiMine.js';
	//==============================标题===============================
	//标题内容
	const titleContent = ref({
		left:'返回',
		midst:'用户注册'
	});
	//返回主页
	const backToUpPage = () => {
		uni.redirectTo({
			url:'/pages/login/login'
		});
	};
	//-----------------------------注册表单提交前-----------------------------------
	const account = ref('');
	const clearShow = ref(false);
	
	const accountClear = () => {
	  clearShow.value = account.value.length > 0;
	};
	
	// 清空账号输入框
	const clearAccount = () => {
	  account.value = '';
	  clearShow.value = false;
	};
	
	const password = ref('');
	const passwordType = ref('password'); // 默认类型为password
	const showEye = ref(false);
	const showEyeSlash = ref(false);
	
	const passwordShow = () => {
	  showEye.value = password.value.length > 0;
	  showEyeSlash.value = false; // 默认不显示eye-slash
	};
	
	// 切换密码可见性
	const togglePasswordVisibility = () => {
	  if (passwordType.value === 'password') {
	    passwordType.value = 'text';
	    showEye.value = true;
	    showEyeSlash.value = false;
	  } else {
	    passwordType.value = 'password';
	    showEye.value = false;
	    showEyeSlash.value = true;
	  }
	};
	// 确认密码
	const passwordAgain = ref('');
	const passwordMatch = computed(() => password.value === passwordAgain.value);
	const confirmPassword = () => {
		// console.log(passwordMatch.value);
		if (!passwordMatch.value) {
			// console.log("两次密码不匹配")
			errorMessage.value = '两次输入密码不匹配!';
		}
		else {
			errorMessage.value = '';
		}
	};
	// 邀请码
	const invitationCode = ref('');
	
	
	//错误消息提示
	const errorMessage = ref('');
	// 失去焦点判断错误消息是否被消除
	const contentLength = (content) => {
		if (content.length > 0) {
			errorMessage.value = '';
		}
	};
	//-----------------------------注册表单提交-----------------------------------
	const register = async () => {
	    // 清除之前的错误信息
	    errorMessage.value = "";
	
	    // 验证输入
	    if (account.value.length === 0) {
	        errorMessage.value = "请输入账号!";
	        return;
	    }
	    if (password.value.length === 0) {
	        errorMessage.value = "请输入密码!";
	        return;
	    }
	    if (passwordAgain.value.length === 0) {
	        errorMessage.value = "请输入确认密码!";
	        return;
	    }
	    if (invitationCode.value.length === 0) {
	        errorMessage.value = "请输入邀请码!";
	        return;
	    }
	    if (!passwordMatch.value) {
	        errorMessage.value = "两次输入密码不匹配!";
	        return;
	    }
	
	    // 如果所有输入都有效，准备提交注册表单
	    const registerForm = {
	        account: account.value,
	        passwd: encrypt(passwordAgain.value),
	        invitationCode: invitationCode.value
	    };
	
	    const res = await userRegister(registerForm);
		// console.log(res);
		if (res === '200') {
			uni.redirectTo({
				url:'/pages/login/login',
				success:function(){
					uni.showToast({
						title:'注册成功'
					})
				}
			})
		}
		else {
			errorMessage.value = res.message;
		}
	};
</script>

<style lang="scss" scoped>
	.register-container{
		.register-form-container{
			.app-ip{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 50rpx 0;
				.app-name{
					font-family: 'Noto Sans TC', sans-serif; // 使用 Noto Sans TC 字体
					font-size: 26px;                       // 设置字号
					text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); // 字体阴影
					text-align: center;                    // 文本居中
					margin: 10px 0;                        // 外边距
				}
				.app-ip-image{
					width: 226rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
			.register-form{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// background-color: antiquewhite;
				.form-item{
					display: flex;
					align-items: center;
					justify-content: center;
					.form-label{
						width: 80px;
						font-size: 32rpx;
						display: flex;            /* 使用弹性布局 */
						justify-content: flex-end; /* 内容靠右对齐 */
						text-align: right;       /* 文字靠右 */
					}
					.form-label-input{
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 20rpx 30rpx;
						padding: 10rpx;
						border: 1px solid rgb(0, 0, 0, 0.3); /* 透明边框 */
						font-size: 32rpx;
						width: 370rpx;
						input{
							width: 370rpx;
						}
					}
				}
				.error-message{
					width: 350rpx;
					height: 16px;
					font-size: 16px;
					color: red;
					margin: 30rpx 0 0 50rpx;
					padding-left: 60rpx;
					display: flex;            /* 使用弹性布局 */
					justify-content: flex-start; 
					text-align: left;       
				}
				.register-submit{
					background-color: #87CEEB;
					margin: 60rpx;
					width: 300rpx;
				}
			}
		}
	}
</style>
